<template>
  <view class="qianqp-footer-tabbar"> 
    <view v-for="(item, index) in tabbarList" :key="index" class="footer_item safe-bottom">
      <view v-if="item.raised" class="footer_raised_item" @click="onRaised">
        <view class="raised_content">
          <view class="raised_theme">
            <view class="raised"></view>
          </view>
        </view>
      </view>
      <view v-else class="footer_nav_item" @click="onPageJump(item.pagePath )">
        <image v-if="item.pagePath == path" :src="'/' + item.selectedIconPath" mode="aspectFit" class="footer_nav_item_image" />
        <image v-else class="footer_nav_item_image" :src="'/' + item.iconPath" mode="aspectFit" />
        <text class="footer_nav_item_text" :class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>
<script>
import { getRoute, routerTo } from '@/utils/router.js'
export default {
  name: 'Tabbar',
  data() {
    return {
      path: '',
      tabbarList: [
        {
          pagePath: 'pages/index/index',
          iconPath: 'static/tabbars/icon-home.png',
          selectedIconPath: 'static/tabbars/icon-home-selected.png',
          text: '首页',
        },
        {
          pagePath: 'pages/order/index',
          iconPath: 'static/tabbars/icon-category.png',
          selectedIconPath: 'static/tabbars/icon-category-selected.png',
          text: '订单',
        },
        {
					iconPath: '',
					text: '凸起导航',
					raised: true
				},
        {
          pagePath: 'pages/message/index',
          iconPath: 'static/tabbars/icon-cao.png',
          selectedIconPath: 'static/tabbars/icon-cao-selected.png',
          text: '消息',
        },
        {
          pagePath: 'pages/my/index',
          iconPath: 'static/tabbars/icon-my.png',
          selectedIconPath: 'static/tabbars/icon-my-selected.png',
          text: '我的',
        },
      ]
    }
  },
  created() {
    // 获取页面路由栈
    const { route } = getRoute()
    this.path = route
  },
  methods: {
   onPageJump(path) {
     if (this.path !== path) {
      uni.switchTab({
         url: '/' + path
      })
     }
   },
   onRaised() {
     console.log('点击了凸起按钮')
   }
  }
}
</script>
<style lang="scss" scoped>
.qianqp-footer-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 502;
  display: flex;
  flex-direction: row;
  width: 100%;
  .footer_item {
    position: relative;
    flex: 1;
  }
  .footer_nav_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  // .footer_nav_item:active {
	//   // background-color: rgba($color: #fff, $alpha: 0.1);
  // }
  .footer_nav_item_text {
    margin: 0 0 10rpx 0;
    font-size: 24rpx;
    line-height: 32rpx;
    color: rgba(0, 0, 0, 0.6);
  }
  .footer_nav_item_text_active {
	  color: $themeColor;
  }
  .footer_nav_item_image {
    width: 48rpx;
    height: 48rpx;
    margin: 10rpx 0 0;
  }
  .footer_raised_item {
    position: absolute;
    top: -40rpx;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112rpx;
    height: 112rpx;
    transform: translateX(-50%);
    border-radius: 50%;
    background-color: #f2f3f5;
  }
  .footer_raised_item_image {
    width: 56rpx;
    height: 56rpx;
  }
  .raised_content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 96rpx;
    height: 96rpx;
    border-radius: 50%;
    background-color: #ffffff;
  }
  .raised_theme {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: $themeColor;
  }
  .raised {
    position: relative;
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    background-color: #ffffff;
    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      content: '';
      width: 44rpx;
      height: 8rpx;
      background-color: $themeColor;
    }
    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%) rotate(90deg);
      content: '';
      width: 44rpx;
      height: 8rpx;
      background-color: $themeColor;
    }
  }
}
</style>